<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    <input type="text" v-model="firstName">
    <div>firstName: {{ firstName }}</div>
    <input type="text" v-model="lastName">
    <div>lastName: {{ lastName }}</div>
    <div>fullName: {{ fullName }}</div>
    
    
    


  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {

    const firstName = ref('尼古拉斯')
    const lastName = ref('赵四')
    const fullName = ref('')

    watch(firstName, (nval, oval) => {
      fullName.value  = nval + '-' + lastName.value
    })
    
    watch(lastName, (nval, oval) => {
      fullName.value  = firstName.value + '-' + nval
    },{immediate: true})


    return {
      firstName,
      lastName,
      fullName,
    }
    
    }

   
  
}
</script>

<style scoped >

</style>